import React, { useContext, useMemo } from 'react';
import styled, { ThemeContext } from 'styled-components';
import Label from '../../../components/Label';
import { TokenStat } from '../../../basis-cash/types';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import TokenSymbol from '../../../components/TokenSymbol';
import { commify } from 'ethers/lib/utils';
import config from '../../../config';
import LaunchCountdown from '../../../components/Dial';
import shangsuo from '../../../assets/image/img_shangsuo@2x.png';
import moment from "moment";
import Countdown from "react-countdown";
import sht from '../../../assets/image/sht.png';
import useBasisCash from '../../../hooks/useBasisCash';
import useLiquidityOracleTVLine from '../../../hooks/useLiquidityOracleTVLine';

interface HomeCardProps {
  title: string;
  baseNum?: number;
  symbol: string;
  color: string;
  supplyLabel?: string;
  stat?: TokenStat;
  group?: string;
}

const HomeCard: React.FC<HomeCardProps> = ({
  title,
  baseNum,
  symbol,
  color,
  supplyLabel = '当前流通量',
  stat,
  group,
}) => {
  const basisCash = useBasisCash();
  const sFundUrl = `${config.etherscanUrl}/address/${config.externalTokens.Fund[0]}`;
  const buyScashUrl = basisCash ? basisCash.getBuyTokenUrl('HUSD/sCASH') : '';//`${config.mdexUrl}#/swap?inputCurrency=${config.externalTokens['HUSD'][0]}&outputCurrency=${config.externalTokens['sCASH'][0]}`;
  
  const StyledCardSuperAccent = styled.div`
  background: linear-gradient(180deg, #23233F, ${color});
  margin-top: 25px;
  border-radius: 0px 0px 20px 20px;
  padding: 20px 20px;
`

  const StyledCardSuperAccent1 = styled.div`
  margin-top: 2px;
  border-radius: 0px 0px 20px 20px;
  padding: 10px 0px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`
  const enable = useLiquidityOracleTVLine(group);
  console.log('group', title + ' ' + group);
  console.log('group', config.externalTokens);
  const address = useMemo(() => {
    if (title == 'SHARE') return config.externalTokens['SHARE'][0];
    if (title == 'sFUND') return config.externalTokens['Fund'][0];
    return config.externalTokens['s' + group.toUpperCase()] ? config.externalTokens['s' + group.toUpperCase()][0] : null;
  }, [basisCash]);
  const tokenUrl = `${config.etherscanUrl}/address/${address}`;
  return (
    <Wrapper>
      <StyledCards>
        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: '15px' }}>
          <TokenSymbol symbol={symbol} />
          <CardHeader>{title}</CardHeader>
        </div>
        {title == 'sFUND' ? (
          <StyledCardSuperAccent>
            <CardTextSection>
              <TokenSymbol symbol={"USDT"} size={40} />
              {stat ? <StyledTextValue>{commify(stat.priceInDAI)}</StyledTextValue> : <ValueSkeleton />}
            </CardTextSection>
            <CardTextSection>
              <TokenSymbol symbol={"wHT"} size={40} />
              {stat ? <StyledTextValue>{commify(stat.totalSupply)}</StyledTextValue> : <ValueSkeleton />}
            </CardTextSection>
            <CardTextSection>
              <TokenSymbol symbol={"pNEO"} size={40} />
              {stat ? <StyledTextValue>{commify(stat.sNeoSupply)}</StyledTextValue> : <ValueSkeleton />}
            </CardTextSection>
          </StyledCardSuperAccent>
          ) : (
          <></>
        )}

        {(title == 'SHARE' || !!group) ? (
          <React.Fragment>
            {
              (title == 'SHARE' ? true : (config.plane[group].bankStartAt ? config.plane[group].bankStartAt.getTime() < Date.now() : false))
              ?
              <StyledCardSuperAccent>
                <CardSection>
                  {stat ? (
                    (<StyledValue>{(stat.priceInDAI !== '-' ? '$' : '') + stat.priceInDAI}</StyledValue>)
                  ) : (
                      <ValueSkeleton />
                    )}
                    {stat && stat.priceSp ? 
                    (<Label text={"价格 " + config.spConfigs[title] + stat.priceSp} color={'#23223E'} />)
                    :
                    (<Label text="价格" color={'#23223E'} />)
                    }
                  
                </CardSection>

                <CardSection>
                  {stat ? <StyledValue>{commify(stat.totalSupply)}</StyledValue> : <ValueSkeleton />}
                  <StyledSupplyLabel href={tokenUrl} target="_blank" color={'#23223E'}>
                    {supplyLabel}
                  </StyledSupplyLabel>
                </CardSection>
              </StyledCardSuperAccent>
              :
              <StyledCardSuperAccent1>
                <LaunchCountdown
                  size={120}
                  value={baseNum ? baseNum / (config.plane[group].sCASH ? config.plane[group].sCASH : config.plane[group].lp) * 100 : 0}
                >
                {baseNum < (config.plane[group].sCASH ? config.plane[group].sCASH : config.plane[group].lp) || !config.plane[group].bankStartAt ?
                  <img
                    src={shangsuo}
                    alt={`LOCK`}
                    width={51}
                  />
                  :
                  <Countdown
                    date={moment((config.plane[group].bankStartAt ? config.plane[group].bankStartAt.getTime() : 0)).toDate()}
                  ></Countdown>
                }
                
                </LaunchCountdown>
                {
                    config.plane[group].lpPair != null && (!enable)
                    ?
                    <React.Fragment>
                      <Totalp>{config.plane[group].lpPair}流动性达到{config.plane[group].lpLabel}$解锁</Totalp>
                      <Totalbutton onClick={() => window.open(basisCash.getStakeLpUrl(config.plane[group].lpPair))}>质押 LP 解锁</Totalbutton>
                    </React.Fragment>
                    :
                    <></>
                }
                {
                    config.plane[group].lpPair != null && enable
                    ?
                    <React.Fragment>
                      <Totalp>{config.plane[group].lpPair}流动性达到{config.plane[group].lpLabel}$解锁</Totalp>
                      <Totalbutton>即将开始</Totalbutton>
                    </React.Fragment>
                    :
                    <></>
                }
                {
                    config.plane[group].sCASH != null 
                    ?
                    <React.Fragment>
                      <Totalp>sCASH总量达到{commify(config.plane[group].sCASH)}解锁</Totalp>
                      <Totalbutton onClick={() => window.open(basisCash.getBuyTokenUrl('HUSD/sCASH'))}>购买sCASH解锁</Totalbutton>
                    </React.Fragment>
                    :
                    <></>
                }
              </StyledCardSuperAccent1>
            }
          </React.Fragment>
        ) : (
            <></>
        )}

          

        {/* <StyledCardSuperAccent>
          <CardSection>
            {stat ? (
              <StyledValue>{(stat.priceInDAI !== '-' ? '$' : '') + stat.priceInDAI}</StyledValue>
            ) : (
                <ValueSkeleton />
              )}
            <Label text="价格" color={'#23223E'} />
          </CardSection>

          <CardSection>
            {stat ? <StyledValue>{commify(stat.totalSupply)}</StyledValue> : <ValueSkeleton />}
            <StyledSupplyLabel href={tokenUrl} target="_blank" color={'#23223E'}>
              {supplyLabel}
            </StyledSupplyLabel>
          </CardSection>
        </StyledCardSuperAccent> */}
        {
          !address ? <WrapperA><a style={{fontSize: 10, marginTop: 12, color: '#fa4e32', textDecoration: 'none' }}>合约地址: 未开始</a></WrapperA> : <WrapperA><a target="_blank" href={`${config.etherscanUrl}/address/${address}`} style={{fontSize: 10, marginTop: 12, color: '#fa4e32', textDecoration: 'none' }}>合约地址: {address.substring(0,4) + '****'+ address.substring(address.length-4,address.length)}</a></WrapperA>
        }
        
      </StyledCards>
    </Wrapper>
  );
};

const Wrapper = styled.div`
  @media (max-width: 768px) {
    margin-top: ${(props) => props.theme.spacing[4]}px;
    width: 250px;
  }
`;

const WrapperA = styled.div`
  width: 200px;
  text-align: center;
  margin-top:12px;
`;

const CardHeader = styled.span`
  font-size: 24px;
  font-family: FZPinShangHeiS-R-GB;
  color: #FFFFFF;
  margin-left: 12px;
`;

const Totalbutton = styled.button`
border: none;
width: 220px;
background: #FA4E32;
border-radius: 22px;
font-size: 16px;
font-family: Comfortaa;
color: #FFFFFF;
line-height: 38px;
`;

const Totalp = styled.p`
min-width: 250px;
text-align: center;
font-size: 13px;
font-family: FZPinShangHeiS-R-GB;
color: #7E7BAD;
`;

const StyledCards = styled.div`
  width: 200px;
  min-height: 315px;
  padding: ${(props) => props.theme.spacing[3]}px 30px;
  color: ${(props) => props.theme.color.white};
  background-color: rgba(48, 55, 78, 0.6);
  @media (max-width: 768px) {
    width: 85%;
  }
`;

const StyledValue = styled.span`
  display: inline-block;
  font-size: 30px;
  color: #eeeeee;
  margin-bottom: 10px;
`;

const StyledTextValue = styled.span`
  display: inline-block;
  font-size: 24px;
  color: #eeeeee;
  margin-bottom: 0px;
`;

const CardTextSection = styled.div`
  display: flex; 
  flex-direction: row; 
  justify-content: left; 
  align-items: center;
  margin-bottom: 18px;
`;

const CardSection = styled.div`
  margin-bottom: ${(props) => props.theme.spacing[4]}px;

  &:last-child {
    margin-bottom: 0;
  }
`;

const ValueSkeletonPadding = styled.div`
  padding-top: ${(props) => props.theme.spacing[3]}px;
  padding-bottom: ${(props) => props.theme.spacing[2]}px;
`;

const StyledSupplyLabel = styled.a`
  font-size: 16px;
  display: block;
  color: ${(props) => props.color};
`;

const ValueSkeleton = () => {
  const theme = useContext(ThemeContext);
  return (
    <SkeletonTheme color={'#fff'} highlightColor={theme.color.primary.main}>
      <ValueSkeletonPadding>
        <Skeleton height={10} />
      </ValueSkeletonPadding>
    </SkeletonTheme>
  );
};

const GuideText = styled.span`
  color: ${(props) => props.theme.color.primary.main};
  font-size: 0.8rem;
`;

const ValueText = styled.p`
  color: ${(props) => props.theme.color.white};
  font-weight: bold;
  font-size: 1.25rem;
  margin: ${(props) => props.theme.spacing[1]}px 0;
`;

export default HomeCard;
